<template>
    <div class="retail">
       <div class="aboutTitle">
          <p class="aboutName">
            <ul>
               <li>{{$t('title.retail')}}</li>
               <li><router-link  :to="{path:'/aboutUs'}">{{$t('title.aboutWenno')}}</router-link></li>
               <li><router-link  :to="{path:'/contactUs'}">{{$t('title.contactUs')}}</router-link></li>              
            </ul>
          </p>
       </div>
       <div class="map">           
        <div class="dropDownMenu">
          <select class="select" v-on:change='getValue($event)'>
            <option v-for="item in choose" v-bind:value="item.location" :key="item.location">
               {{item.location}}
            </option> 
          </select>
         </div> 
          <div class="table">
            <table border="0px">           
              <thead>
                <tr>
                    <th class="first">{{$t('retailStore.retail')}}</th></td>
                    <th>{{$t('retailStore.address')}}</th>
                    <th>{{$t('retailStore.phone')}}</th>
                    <th>{{$t('retailStore.business')}}</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in retail">
                  <td class="first">{{item.name}}</td>
                  <td>{{item.address}}</td>
                  <td>{{item.phone}}</td>
                  <td>{{item.business_hours}}</td>
                </tr>                
              </tbody>

            </table>            
          </div>
              
<!--            <template>
              <viewer>
                 <img src="../assets/img/map_hk.png" >
              </viewer>
          </template> -->
       </div>
    </div>
</template>
<script>
export default {
  name: "retail",
  data () {
    return {
        name:'我要测试首页',
        choose:[],
        retail:[]
    }
  },
  mounted:function(){ 
       window.scrollTo(0, 0);
  },
  methods:{
      getValue(event){
          console.log('您选择了',event.target.value)
        this.$loading(this.$t("contact.loading"));
        const self = this;
        axios.get('/api/locals?location='+event.target.value+'&include=retails')
          .then(function (response) {
             self.closeLoading();
             self.retail = response.data.data[0].retails.data;
          })
          .catch(function (error) {
              console.log(JSON.stringify(error));
          }) 
      },
      retails(){
        this.$loading(this.$t("contact.loading"));
        let self = this;
        axios.get('/api/locals')
            .then(function (response) {
               self.choose = response.data.data;
            })
            .catch(function (error) {
                console.log(JSON.stringify(error));
            }) 
          axios.get('/api/locals?include=retails')
          .then(function (response) {
             self.closeLoading();
             if(response.data.data!=null){
                 self.retail = response.data.data[0].retails.data;
             }else{
                 return
             }
          })
          .catch(function (error) {
              console.log(JSON.stringify(error));
          }) 
      },
      closeLoading(){
         this.$loading.close();
      }
  },
  created:function () {
     this.retails();
  } 
};
</script>
<style scoped>
   .aboutTitle{width:100%;background:#fff6e9;height:64px;line-height:64px;}
   .aboutTitle p{width:72%;margin:0px auto;text-align:left;font-size:1.41rem;color:#7b5c55;font-weight:bold;}
   .aboutTitle p ul{width:100%;height:100%;}
   .aboutTitle p li{float:left;list-style: none;}
   .aboutTitle p li{width:30%;text-align:center;font-size:0.9rem;font-weight:normal;cursor: pointer;}
   .aboutTitle p li a{color:#7b5c55;}
   .aboutTitle p li:first-child{width:40%;text-align:left;font-size:1.41rem;color:#7b5c55;font-weight:580;}
   .map{width:100%;background:#fff;}
   .dropDownMenu,.table{width:72%;height:100px;margin:0px auto;}
   .select{width:200px;height:46px;line-height: 46px;border:1px solid #ead3b0;border-radius:6px;text-align:left;float: left;margin-top: 30px;text-indent:1rem;font-size:1rem;color:#836660;background:url(../assets/img/arrow.png)96% 50% no-repeat;background-size: 12px 7px;}
      .table{width:72%;height:auto;margin:10px auto 20px auto;min-height:calc(100vh - 355px);}
     .table table{width:100%;height:auto;}
     .table thead tr,.table tbody tr{width:100%;background:#000;text-align:left;}
     .table thead tr th,.table tbody tr td{line-height:22px;padding: 1rem 0rem;color:#fff;font-size:1rem;}
     .first{text-indent:1rem;}
     .table tbody tr td{color:#7b5c55;}
     .table tbody tr:nth-child(odd){background:#fff;}
     .table tbody tr:nth-child(even){background:#ead3b0;}
/*   .imgBox img{width:100%;}*/
  @media screen and (max-width: 768px) {
      .imgList{width:100%;padding:0.5rem 0rem;}
      .aboutTitle p{width:90%;height:100%;}
      .aboutTitle p li{font-size:0.65rem;width:35%;}
      .aboutTitle p li:first-child{width:30%;font-size:0.9rem;}
      .usList{width:90%;}
      .usList span{font-size:0.8rem;}
      .dropDownMenu{width:94%;height:80px;}
      .table{width:94%;margin:0px auto 60px auto;}
      .first{text-indent:0rem;}
      .table thead tr th,.table tbody tr td{font-size:0.8rem;padding: 0.6rem 0rem;text-align:center;}
      .select{height:38px;line-height:38px;margin-top:20px;}
   }
</style>